/* 
    Document   : style
    Created on : 2011-okt-12, 15:00:47
    Author     : Admin
    Description:
        Purpose of the stylesheet follows.
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

*{
    border: 0px;
    margin: 0px;
    padding: 0px;
}

html {
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
}

root { 
    display: block;
}



a{
    color: #3B3B3B;
}

a:hover{
    color: #1BBFE0;
}

h1{
    font-weight: lighter;
    font-size:36px;
    line-height: 36px;
}

body{
    position:absolute;
    top:0;
    left:0;
    background: url('../images/bg.jpg');
    height:100%;
    width:100%;
    font: normal 12px/1.5 Arial, Helvetica, sans-serif;
    color:#3B3B3B;
}

/* IDS */
#showSingle {

    
}

#singleContainer {
    width:960px;
    height: 100%;
    margin: 0px auto;
}

#tabletContainer {
    margin-top: 20px;
    width: 960px;
    height: 580px;
    overflow: auto;
    background: url('../images/tab_bg.png') no-repeat;
}

#tabletContent{
    background: white;
    height:460px;
    width:880px;
    margin:50px 40px 0 40px;
}

#nav{
    float:left;
    height:460px;
    width: 200px;
    background: #efefef url('../images/step_container_bg.gif') right top repeat-y;
    font-size: 18px;
    overflow-y: scroll;
    overflow-x: hidden;
    text-shadow: #FFFFFF 0px 2px 0px;
}

#tutorialContent{
    float:right;
    height:460px;
    width:680px;
}

#tutorialEntry{
    float:left;
    width:585px;
    height:435px;
    padding:5px 20px 20px 20px;
}

#tutorialMeta
{
    font-size: 10px;
}

#stepText{
    margin:70px 70px 0 70px;
    text-align: justify;
}

#stepData{
    margin:10px 70px 0 70px;
}

#stepLink{
    font-size:14px;
    font-weight: bold;
}

#tutorialProgress{
    font-size: 10px;
    float:right;
    height:460px;
    width:55px;
    display:none;
}

#progressText{
    float:left;
    text-align: right;
    width: 45px;
    margin-top: 40px;
}

#progressBar{
    float:right;
    height:460px;
    width:10px;
    background: url('../images/progress_gray.gif');
}

#progressBarCompleted{
    width:10px;
    background: url('../images/progress_green.gif');
    height:0px;
}

#btnContainer{
    width:302px;
    height:42px;
    display: inline-block;
    position:relative;
    left:50%;
    margin-left:-151px;
    background: url('../images/nav_buttons.png');
}
#btnPrev{
    float: left;
}

#btnNext{
    float:right;
    text-align: right;
}

#btnPrev a, #btnNext a{
    color:#333;
    width:151px;
    height:36px;
    font-size: 20px;
    display: block;
    padding-top:6px;
    text-align: center;
    text-decoration: none;
}

#commentToggel{
    margin-left: 100px;
    margin-top:-65px;
    float:left;
}

#commentAdd{
    float:right;
    margin-top:-65px;
    margin-right: 100px;
}

#newCommentText{
    resize: height;
    width: 246px;
    max-width: 246px;
    min-width: 246px;
    min-height: 80px;
    height: 80px;
}

#showAll {
}

#oneTutorial {
	display: none;
}

/* CLASSES */
.debug{
    border: 1px solid red;
}

.hidden{
    display: none;
}

.tutorialStep{
    background:url('../images/step_bg.gif');
    height:35px;
    width: 100%;
}

.tutorialStep a{
    background: url('../images/step_right.gif') right top no-repeat;
    height:30px;
    width: 175px;
    display:block;
    padding: 5px 0 0 10px;
    text-decoration: none;
}

.tutorialStep a:hover{
    background: white;
}

.currentStep{
    background: white;
    font-weight: bold;
    padding: 0px 0 0 10px;
    height:35px;
}

.currentStep a{
    background: white;
}

.nextStep{
    background:url('../images/step_next_bg.gif');
}

.nextStep a{
    background: url('../images/step_next_right.gif') right top no-repeat;
}
    
#commentContainer {
    margin-left: 38px;
    width: 300px;
    /*margin-top:20px;*/
    display:none;
}

.commentButton{
    width:151px;
    height:31px;
    color:#000;
    padding-top:10px;
    text-align: center;
    font-size: 14px;
    font-family : "Comic Sans MS";
    font-weight: bold;
    text-decoration: none;
    display:block;
    background: url('../images/comment_button_bg.png');
}

.comment {
    overflow-y: visible;
    width: 285px;
}

.comment .commentTop {
    background: url("../images/comment_top.png") no-repeat scroll 0 0 transparent;
    font-style: italic;
    height: 20px;
    padding-left: 15px;
    padding-top: 10px;
    font-weight: bold;
}

.comment .commentContent {
    background: url("../images/comment-bg2.png") repeat-y scroll 0 0 transparent;
    margin-left: 4px;
    margin-right: 5px;
    padding-left: 10px;
    padding-right: 5px;
    width: 258px;
    z-index: 1;
}

.comment .commentBottom {
    background: url("../images/comment_bottom.png") no-repeat scroll 0 0 transparent;
    height: 32px;
    padding-right: 20px;
    padding-top: 10px;
    text-align: right;
}

#showAll {
	display: inline-block;
	width: 100%
}

#allTutorials {
	width: 100%;	
}

#allTutorials_wrapper {
	width: 90%;
	display: block;
	margin: 30px auto;
}

.css_right {
	float: right;
}

#allTutorials_length {
	display: none;
}

#backButton {
	float: right;
}